<!--机构内部转账业务录入-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <!--交易基础信息-->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易基础信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="bizTypeCode">
              <el-select v-model="form.bizTypeCode" placeholder="业务类型" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.BANK_BIZ_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记账标志" prop="cbflag">
              <el-select v-model="form.cbflag" clearable placeholder="业务种类" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.CBFLAG"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款机构号" prop="payerAgency">
              <el-input v-model="form.payerAgency" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款机构名" prop="payerBrName">
              <el-input v-model="form.payerBrName" placeholder="" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--付款人信息-->
      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payerActno">
              <el-input
                v-model="form.payerActno"
                placeholder="付款人账号"
                @keyup.enter.native="getActNoInfo('payerActNo')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-button type="primary" icon="el-icon-search" plain @click="openPayerDialog('payerActno')">
                账号查找
              </el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="付款人名称" prop="payerName">
            <el-input v-model="form.payerName" placeholder="付款人名称" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="付款人地址" prop="payerAddr">
            <el-input v-model="form.payerAddr" placeholder="付款人地址" />
          </el-form-item>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payer">
              <el-form-item label="付款人开户机构号" prop="payerAccBrno">
                <el-input
                  v-model="form.payerAccBrno"
                  placeholder="付款人开户机构号"
                  @keyup.enter.native="getBankInf('payerAccBrno', form.payerAccBrno)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-payer">
              <el-button type="primary" icon="el-icon-search" plain @click="openBankBranchDialog('payerAccBrno')">
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="13">
            <el-form-item label="付款人开户机构名" prop="payerAccBrName" label-width="130px">
              <el-input v-model="form.payerAccBrName" placeholder="付款人开户机构名" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!--收款人信息-->
      <el-card class="form-card payeeInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="grid-payee">
              <el-form-item label="收款人账号" prop="payeeActno">
                <el-input
                  v-model="form.payeeActno"
                  placeholder="收款人账号"
                  @keyup.enter.native="getActNoInfo('payeeActno')"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-payee">
              <el-button type="primary" icon="el-icon-search" plain @click="openPayerDialog('payeeActno')">
                账号查找
              </el-button>
            </div>
          </el-col>
        </el-row>
        <el-form-item label="收款人名称" prop="payeeName">
          <el-input v-model="form.payeeName" placeholder="收款人名称" />
        </el-form-item>
        <el-form-item label="收款人地址" prop="payeeAddr">
          <el-input v-model="form.payeeAddr" placeholder="收款人地址" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款机构号" prop="payeeAgency">
                <el-input
                  v-model="form.payeeAgency"
                  placeholder="收款机构号"
                  disabled
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-payee">
              <el-button type="primary" icon="el-icon-search" plain @click="brnoQry()">
                收款机构号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="13">
            <el-form-item label="收款机构名" prop="payeeBrName" label-width="130px">
              <el-input v-model="form.payeeBrName" placeholder="收款机构名" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="grid-payee">
              <el-form-item label="收款人开户机构号" prop="payeeAccBrno">
                <el-input
                  v-model="form.payeeAccBrno"
                  placeholder="收款人开户机构号："
                  @keyup.enter.native="getBankInf('payeeAccBrno', form.payeeAccBrno)"
                />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-payee">
              <el-button type="primary" icon="el-icon-search" plain @click="openBankBranchDialog('payeeAccBrno')">
                行号查找
              </el-button>
            </div>
          </el-col>
          <el-col :span="13">
            <el-form-item label="收款人开户机构名" prop="payeeAccBrName" label-width="130px">
              <el-input v-model="form.payeeAccBrName" placeholder="收款人开户机构名" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <!--其他信息-->
      <el-card class="form-card payOtherInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他交易信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易货币" prop="curcd">
              <el-input v-model="form.curcd" placeholder="" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额" prop="amount">
              <HtAmountInput v-model="form.amount" placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-otherInfo">
              <el-form-item label="附言" prop="remarks">
                <el-input type="textarea" v-model="form.remarks" placeholder="附言" maxlength="128" show-word-limit />
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm(null)" :loading="isLoading">提交</el-button>
      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>
    </div>
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
    <brno-search-dialog ref="brnoSearchDialog" @confirm="confirmBrno"></brno-search-dialog>
    <payer-dialog ref="payerDialog" @confirm="confirmPayer"></payer-dialog>
  </div>
</template>

<script>
import { save } from "@/api/cnaps/baseBiz/interTransfer/inside_transfer_entry.js";
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import PayeeDialog from "@/views/components/PayeeDialog";
import PayerDialog from "@/views/components/PayerDialog";
import { mapGetters } from "vuex";
import HtAmountInput from "@/views/components/HtAmountInput";

import {addTxn, updTxn} from "@/api/cnaps/baseBiz/send/hvps/hvps";
import BrnoSearchDialog from "@/views/components/BrnoSearchDialog";
export default {
  name: "InsideTransferEntry",
  mixins: [listPageMixin],
  components: { BrnoSearchDialog, BankBranchDialog, PayeeDialog, PayerDialog, HtAmountInput },
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  data() {
    return {
      isLoading: false,

      // 录入参数
      form: {
        bizTypeCode: "A100",
        cbflag: "0",
        payerAgency: "",
        payerBrName: "",
        payerActno: "",
        payerName: "",
        payerAddr: "",
        payerAccBrno: "",
        payerAccBrName: "",
        payeeActno: "",
        payeeName: "",
        payeeAddr: "",
        payeeAgency: "",
        payeeBrName: "",
        payeeAccBrno: "",
        payeeAccBrName: "",
        curcd: "CNY",
        amount: "",
        remarks: "",
      },
      rules: {
        bizTypeCode: [{ required: true, message: "不能为空", trigger: "change" }],
        payerAgency: [{ required: true, message: "不能为空", trigger: "change" },{ max: 14, message: "最大为14位", trigger: "change" }],
        payerBrName : [{ max: 60, message: "最大为60位", trigger: "change" }],
        payerAccBrno: [{ required: true, message: "不能为空", trigger: "change" },{ max: 14, message: "最大为14位", trigger: "change" }],
        payerAccBrName : [{ max: 60, message: "最大为60位", trigger: "change" }],
        payerActno: [{ required: true, message: "不能为空", trigger: "change" },{ max: 32, message: "最大为32位", trigger: "change" }],
        payerName : [{ required: true, message: "不能为空", trigger: "change" },{ max: 60, message: "最大为60位", trigger: "change" }],
        payerAddr : [{ max: 70, message: "最大为70位", trigger: "change" }],
        payeeActno: [{ required: true, message: "不能为空", trigger: "change" },{ max: 32, message: "最大为32位", trigger: "change" }],
        payeeName : [{ required: true, message: "不能为空", trigger: "change" },{ max: 60, message: "最大为60位", trigger: "change" }],
        payeeAddr : [{ max: 70, message: "最大为70位", trigger: "change" }],
        payeeAgency: [{ required: true, message: "不能为空", trigger: "change" },{ max: 14, message: "最大为14位", trigger: "change" }],
        payeeBrName : [{ max: 60, message: "最大为60位", trigger: "change" }],
        payeeAccBrno: [{ required: true, message: "不能为空", trigger: "change" },{ max: 14, message: "最大为14位", trigger: "change" }],
        payeeAccBrName : [{ max: 60, message: "最大为60位", trigger: "change" }],
        remarks : [{ max: 128, message: "最大为128位", trigger: "change" }],
        amount: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      searchFormDictList: ["BANK_BIZ_TYPE", "CBFLAG"],
    };
  },
  created() {
    this.$set(this.form, "payerAgency", this.globalBusData.brno);
    this.$set(this.form, "payerBrName", this.globalBusData.brname);
  },
  mounted() {},

  methods: {
    submitCheck(res) {
      if (res.code === "C") {
        this.$confirm(res.message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submitForm(res.result);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消执行'
          });
          return;
        });
      }
    },
    /** 提交按钮 */
    submitForm(pass) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.pass = pass;
          this.loading = true;
          save(this.form).then((res) => {
              this.submitCheck(res);
              if (res.code === "S") {
                this.$alert(`CORE_ID: ${res.result.rspId}`, "生成交易流水号", {
                  confirmButtonText: "确定",
                  //刷新一下查询列表 TODO
                  callback: (action) => {
                  },
                });
                this.refresh();
              }
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("form");
    },

    //行名行号返回
    confirmBankBranch(fromFlag, row) {
       if (fromFlag == "payeeAccBrno") {
        this.$set(this.form, "payeeAccBrno", row.bankCode);
        this.$set(this.form, "payeeAccBrName", row.orgFullname);
      } else if (fromFlag == "payerAccBrno") {
        this.$set(this.form, "payerAccBrno", row.bankCode);
        this.$set(this.form, "payerAccBrName", row.orgFullname);
      }
    },
    //回车取行号信息
    getBankInf(searchType, bankCode) {
      getBankInfByBankCode(bankCode).then((response) => {
        if (response.code == "S" && response.result !== null) {
          switch (searchType) {

            case "payerAccBrno":
              this.$set(this.form, "payerAccBrno", response.result.bankCode);
              this.$set(this.form, "payerAccBrName", response.result.orgFullname);
              break;
            case "payeeAccBrno":
              this.$set(this.form, "payeeAccBrno", response.result.bankCode);
              this.$set(this.form, "payeeAccBrName", response.result.orgFullname);
              break;
          }
        } else {
          this.msgSuccess("查无此行号");
          switch (searchType) {
            case "payerAccBrno":
              this.$set(this.form, "payerAccBrName", null);
              break;
            case "payeeAccBrno":
              this.$set(this.form, "payeeAccBrName", null);
              break;
          }
        }
      });
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    //行内收付款人账号查询
    openPayerDialog(fromFlag = "") {
      this.$refs.payerDialog.show(fromFlag);
    },
    confirmPayer(fromFlag, row) {
      if (fromFlag == "payerActno") {
        this.$set(this.form, "payerActno", row.actNo);
        this.$set(this.form, "payerName", row.name);
        this.$set(this.form, "payerAddr", row.addr);
      }
      else if (fromFlag == "payeeActno") {
        this.$set(this.form, "payeeActno", row.actNo);
        this.$set(this.form, "payeeName", row.name);
        this.$set(this.form, "payeeAddr", row.addr);
      }
    },

    //收款机构号查询
    brnoQry() {
      this.$refs.brnoSearchDialog.show();
    },
    confirmBrno(fromFlag, row) {
      this.$set(this.form, "payeeAgency", row.brno);
      this.$set(this.form, "payeeBrName", row.brname);
    },
  },
};
</script>
<style>
.app-container {
  overflow: scroll;
}
.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
</style>
